/*
 *监控页页面
 */
'use strict';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Row, Col, Tabs, Button, Icon, Card, Avatar, List, Spin } from 'antd';
import { formatTime } from '@app/constants/CommonFn.jsx';
import {monitorData, getTimeMonitorData} from '@app/constants/DataSource.jsx';
import './Monitor.css';
const TabPane = Tabs.TabPane;
const ReactHighcharts = require('react-highcharts');
const Highcharts = require('highcharts');

class Monitor extends Component {
	constructor(props) {
  	super(props);
		this.state = {
      loading:true,
      loadingMore: false,
      showLoadingMore: true,
      data: monitorData
    };
    this.timer1=1;
    this.timer2=2;
    this.timer3=3;
    this.timer4=4;
    getTimeMonitorData(() => {
      this.setState({data:monitorData})
    });
 	}

  componentDidMount(){
    let config1 = this.formChart({
        clock:this.clockTime,
        wholeNum:90,
        timer:'timer1'
      });
    let config2 = this.formChart({
        clock:this.clockTime,
        wholeNum:80,
        timer:'timer2'
      });
    let config3 = this.formChart({
        clock:this.clockTime,
        wholeNum:80,
        timer:'timer3'
      });
    let config4 = this.formChart({
        clock:this.clockTime,
        wholeNum:85,
        timer:'timer4'
      });
    this.timer5 = setTimeout(() => {
      this.setState({loading:false});
      Highcharts.chart('config1',config1);
      Highcharts.chart('config2',config2);
      Highcharts.chart('config3',config3);
      Highcharts.chart('config4',config4);
    },500);
  }

 	componentWillUnmount(){
		clearInterval(this.timer1);
    clearInterval(this.timer2);
    clearInterval(this.timer3);
    clearInterval(this.timer4);
    clearTimeout(this.timer5);
	}

  clockTime = (timer,wholeNum,series,series1) => {
    this[timer] = setInterval(function () {
                var x = (new Date()).getTime()+1000*60*60*8, // current time
                    y = wholeNum + ((-1)^Math.ceil(Math.random()*10))*(Math.ceil(Math.random()*100)/100);
                series.addPoint([x, y], false, true);
                    y = wholeNum + ((-1)^Math.ceil(Math.random()*10))*(Math.ceil(Math.random()*100)/100);
                series1.addPoint([x, y], true, true);
            }, 1000);
  }


  formChart = (option) => {
  	let config = {
		 	chart: {
        type: 'spline',
        marginRight: 10,
        events: {
	        load: function () {
            var series = this.series[0],
            		series1 = this.series[1],
                chart = this;
                option.clock(option.timer,option.wholeNum,series,series1);
	        }
        }
	    },
	    title: {
        text: '实时数据'
	    },
	    tooltip:{
	    	dateTimeLabelFormats:{
	    		millisecond:"%b %e, %H:%M:%S"
	    	}
	    },
	    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150,
        dateTimeLabelFormats:{
        	millisecond: '%H:%M:%S',
        }
	    },
	    yAxis: {
        title: {
          text: '值'
        },
        max:100,
        min:50
	    },
	    legend: {
        enabled: true
	    },
	    exporting: {
	        enabled: false
	    },
	    credits:{
        enabled: false // 禁用版权信息
      },
	    series: [{
        name: '分值',
        data: (function () {
          var data = [],
              time = (new Date()).getTime()+1000*60*60*8,
              i;
          for (i = -100; i <= 0; i += 1) {
              data.push({
                  x: time + i * 1000,
                  y: option.wholeNum + ((-1)^Math.ceil(Math.random()*10))*(Math.ceil(Math.random()*100)/100)
              });
          }
          return data;
        }()),
        color:'#008CFF'
	    },{
        name: '平均值',
        data: (function () {
          var data = [],
              time = (new Date()).getTime()+1000*60*60*8,
              i;
          for (i = -100; i <= 0; i += 1) {
              data.push({
                  x: time + i * 1000,
                  y: option.wholeNum + ((-1)^Math.ceil(Math.random()*10))*(Math.ceil(Math.random()*100)/100)
              });
          }
          return data;
        }()),
        color:'#FF0000'
	    },]
		};
		return config;
	}

  render() {
  	let config5 = {
  		chart: {
  			plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        spacing : [20, 0 , 80, 0],
        height:260      
      },
      title: {
        verticalAlign:'middle',
        text: '各项比重',
        style:{'fontSize': '12px'}
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      xAxis: {
	      plotBands: [{
          enabled:false
	      }]
      },
      yAxis: {
        plotBands: [{
          enabled:false
        }]
      },
      point: {
        events: {
          mouseOver: function(e) {  // 鼠标滑过时动态更新标题
            chart.setTitle({
                text: e.target.name+ '\t'+ e.target.y + ' %'
            });
          }
      	}
    	},
      plotOptions: {
        pie: {
          allowPointSelect: false,
          cursor: 'pointer',
          dataLabels: {
          	softConnector:false,
            enabled: false , //禁用数据名称
          }
        }
      },
      exporting:{
        enabled:false
      },
      credits:{
        enabled: false // 禁用版权信息
      },
      series: [{
        type: 'pie',
        innerSize: '80%',
        name:'评分比重',
				data: [
	        {name:'污染',y:  50},
	        {name:'空气',y:30},
	        {name:'水质',y:10},
	        {name:'土质',y:20},
	      ]
      }]
  	};

    const { loading, data } = this.state;

    return (
   		<div className = 'monitor'>
   			<Row gutter = {16}>
   				<Col span = {18}>
   					<Card loading = {this.state.loading}>
			  			<Tabs >
						    <TabPane tab={<span><Icon type="bar-chart" />空气质量</span>} key="1" forceRender ={true}>
                  <div id = "config1">1</div>
						    </TabPane>
						    <TabPane tab={<span><Icon type="line-chart" />污染程度</span>} key="2" forceRender ={true}>
						      <div id = 'config2'>2</div>
						    </TabPane>
						    <TabPane tab={<span><Icon type="dot-chart" />水质</span>} key="3" forceRender ={true}>
						      <div id = 'config3'>3</div>
						    </TabPane>
						    <TabPane tab={<span><Icon type="area-chart" />土质</span>} key="4" forceRender ={true}>
						      <div id = 'config4'>4</div>
						    </TabPane>
						  </Tabs>
				  	</Card>
            <Card title="动态" loading = {this.state.loading} className = 'infoList' style = {{marginTop:20}}>
              <List
                className="demo-loadmore-list"
                loading={loading}
                itemLayout="horizontal"
                dataSource={data}
                style = {{height:'auto'}}
                renderItem={item => (
                  <List.Item
                     actions={[<span>{item.ranksId}</span>,<span>{item.date}</span>]}
                  >
                    <List.Item.Meta
                      avatar={<Avatar icon="user" />}
                    />
                    <div><a href="#">{item.name}</a>{item.userAction}了{item.categories}数据,数值为:{item.userIOrD+item.num}</div>
                  </List.Item>
                )}
              />
            </Card>
				  </Col>
				  <Col span = {6}>
   					<Card title = '着重排行' style = {{background:'#fff'}} loading = {this.state.loading}>
							<p><Avatar>1</Avatar><span className = 'paihang'>污染<span><Icon type="caret-down" style = {{color:'#00FF00'}}/>10%</span></span></p>
							<p><Avatar>2</Avatar><span className = 'paihang'>水质<span><Icon type="caret-down" style = {{color:'#00FF00'}}/>8%</span></span></p>
							<p><Avatar>3</Avatar><span className = 'paihang'>空气<span><Icon type="caret-up" style = {{color:'#FF0000'}}/>2%</span></span></p>
							<p><Avatar>4</Avatar><span className = 'paihang'>土质<span><Icon type="caret-up" style = {{color:'#FF0000'}}/>3%</span></span></p>
				  	</Card>
				  	<Card title = '评分比重' style = {{background:'#fff',marginTop:20}} loading = {this.state.loading}>
				  		<ReactHighcharts config={config5}/>
				  	</Card>
				  </Col>
			  </Row>
    	</div>
		);
  }
}

function mapStateToProps(state) {
  return {
  }
}

export default connect(
  mapStateToProps,
  {

	}
)(Monitor)